<template>
  <div class="range-input-wrap">
    <el-form-item :label="label" :prop="minProp" :label-width="labelWidth">
      <el-input v-model="min" @input="e => (min = numberInput3(e))" @blur="sortValue" />
    </el-form-item>
    <span class="range-separator">至</span>
    <el-form-item :prop="maxProp" label-width="0">
      <el-input v-model="max" @input="e => (max = numberInput3(e))" @blur="sortValue" />
    </el-form-item>
  </div>
</template>

<script>
// import { numberInput3 } from '@/utils';

const numberInput3 = (value) => { // 3位小数
  return value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1');
};

export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    minProp: {
      type: String,
      default: ''
    },
    maxProp: {
      type: String,
      default: ''
    },
    minValue: {
      type: [String, Number, Object],
      default: ''
    },
    maxValue: {
      type: [String, Number, Object],
      default: ''
    },
    labelWidth: {
      type: String,
      default: '130px'
    }
  },
  data() {
    return {
      numberInput3
    };
  },
  computed: {
    min: {
      get() {
        return this.minValue;
      },
      set(value) {
        this.$emit('update:minValue', value); // :minValue.sync=""
      }
    },
    max: {
      get() {
        return this.maxValue;
      },
      set(value) {
        this.$emit('update:maxValue', value); // :maxValue.sync=""
      }
    }
  },
  methods: {
    sortValue() {
      if ((this.min || this.min === 0) && (this.max || this.max === 0)) {
        if (Number(this.min) > Number(this.max)) {
          const max = JSON.parse(JSON.stringify(this.min));
          const min = JSON.parse(JSON.stringify(this.max));
          this.min = min;
          this.max = max;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.range-input-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.range-separator {
  width: 30px;
  text-align: center;
  margin-top: -14px;
  font-size: 14px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  color: #1f2022;
}
</style>
